<?php
$this->title = 'CTI录音文件分类';
$this->params['breadcrumbs'][] = $this->title;
$i = 1;
?>
<?= $this->render('/common/alert')?>
<!-- /.box-header -->
<div class="box-body">
<!--	<input class='btn btn-primary' type='button' id='addClassify'-->
<!--		value='新增训练机器人' />-->
</div>
<div id="addClassifys">
	<div class="row addclassify">
		<div class="col-md-12">
			<div class="box">
				<div class="box-header with-border">
<!--					<h3 class="box-title">机器人1</h3>-->
					<h3 class="box-title">机器人</h3>
					<div class="box-tools pull-right">
						<button type="button" class="btn btn-box-tool"
							data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
						<button type="button" class="btn btn-box-tool"
							data-widget="remove">
							<i class="fa fa-times"></i>
						</button>
					</div>
				</div>
				<!-- /.box-header -->
				<div class="box-body">
					<div class="row">
						<div class="col-md-12">
							<p class="text-center">
								<iframe src="classify?serialNumber=1" width="100%" height="600px"
									frameborder="no" border="0" marginwidth="0" marginheight="0"></iframe>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	
	var androidNum = 2;
	$(document).on("click", "#addClassify", function () {
		krajeeDialog.confirm("确认是否要新建机器人？",function(result){
		     if(result){
            	var html = 
            		"<div class=\"row addclassify\">"+
            		"		<div class=\"col-md-12\">"+
            		"			<div class=\"box\">"+
            		"				<div class=\"box-header with-border\">"+
            		"					<h3 class=\"box-title\">机器人"+ androidNum +"</h3>"+
            		"					<div class=\"box-tools pull-right\">"+
            		"						<button type=\"button\" class=\"btn btn-box-tool\""+
            		"							data-widget=\"collapse\">"+
            		"							<i class=\"fa fa-minus\"></i>"+
            		"						</button>"+
            		"						<button type=\"button\" class=\"btn btn-box-tool\""+
            		"							data-widget=\"remove\">"+
            		"							<i class=\"fa fa-times\"></i>"+
            		"						</button>"+
            		"					</div>"+
            		"				</div>"+
            		"				<!-- /.box-header -->"+
            		"				<div class=\"box-body\">"+
            		"					<div class=\"row\">"+
            		"						<div class=\"col-md-12\">"+
            		"							<p class=\"text-center\">"+
            		"								<iframe src=\"classify?serialNumber="+androidNum+"\" width=\"100%\" height=\"300px\""+
            		"									frameborder=\"no\" border=\"0\" marginwidth=\"0\" marginheight=\"0\"></iframe>"+
            		"							</p>"+
            		"						</div>"+
            		"					</div>"+
            		"				</div>"+
            		"			</div>"+
            		"		</div>"+
            		"	</div>";
        		var addClassifys = $("#addClassifys");
        		addClassifys.append(html);
        		androidNum++;//让机器人数加1
        		startBoxWidget();
		     }
		});
	});

	/* 开始adminlte组建的BoxWidget */
	function startBoxWidget(){
		var DataKey = 'lte.boxwidget';
		  var Default = {
		    animationSpeed : 500,
		    collapseTrigger: '[data-widget="collapse"]',
		    removeTrigger  : '[data-widget="remove"]',
		    collapseIcon   : 'fa-minus',
		    expandIcon     : 'fa-plus',
		    removeIcon     : 'fa-times'
		  };
		  var Selector = {
		    data     : '.box',
		    collapsed: '.collapsed-box',
		    header   : '.box-header',
		    body     : '.box-body',
		    footer   : '.box-footer',
		    tools    : '.box-tools'
		  };
		  var ClassName = {
		    collapsed: 'collapsed-box'
		  };
		  var Event = {
		    collapsed: 'collapsed.boxwidget',
		    expanded : 'expanded.boxwidget',
		    removed  : 'removed.boxwidget'
		  };
		  // BoxWidget Class Definition
		  // =====================
		  var BoxWidget = function (element, options) {
		    this.element = element;
		    this.options = options;
		    this._setUpListeners();
		  };
		  //toggle的动画
		  BoxWidget.prototype.toggle = function () {
		    var isOpen = !$(this.element).is(Selector.collapsed);
		    if (isOpen) {
		      this.collapse();
		    } else {
		      this.expand();
		    }
		  };
		  BoxWidget.prototype.expand = function () {
		    var expandedEvent = $.Event(Event.expanded);
		    var collapseIcon  = this.options.collapseIcon;
		    var expandIcon    = this.options.expandIcon;
		    $(this.element).removeClass(ClassName.collapsed);
		    $(this.element)
		      .children(Selector.header + ', ' + Selector.body + ', ' + Selector.footer)
		      .children(Selector.tools)
		      .find('.' + expandIcon)
		      .removeClass(expandIcon)
		      .addClass(collapseIcon);
		    $(this.element).children(Selector.body + ', ' + Selector.footer)
		      .slideDown(this.options.animationSpeed, function () {
		        $(this.element).trigger(expandedEvent);
		      }.bind(this));
		  };
		  BoxWidget.prototype.collapse = function () {
		    var collapsedEvent = $.Event(Event.collapsed);
		    var collapseIcon   = this.options.collapseIcon;
		    var expandIcon     = this.options.expandIcon;
		    $(this.element)
		      .children(Selector.header + ', ' + Selector.body + ', ' + Selector.footer)
		      .children(Selector.tools)
		      .find('.' + collapseIcon)
		      .removeClass(collapseIcon)
		      .addClass(expandIcon);
		    $(this.element).children(Selector.body + ', ' + Selector.footer)
		      .slideUp(this.options.animationSpeed, function () {
		        $(this.element).addClass(ClassName.collapsed);
		        $(this.element).trigger(collapsedEvent);
		      }.bind(this));
		  };
		  //移除的动画，androidNum--;//让机器人数减1
		  BoxWidget.prototype.remove = function () {
			androidNum--;
		    var removedEvent = $.Event(Event.removed);
		    $(this.element).slideUp(this.options.animationSpeed, function () {
		      $(this.element).trigger(removedEvent);
		      $(this.element).remove();
		    }.bind(this));
		  };
		  // Private
		  BoxWidget.prototype._setUpListeners = function () {
		    var that = this;
		    $(this.element).on('click', this.options.collapseTrigger, function (event) {
		      if (event) event.preventDefault();
		      that.toggle($(this));
		      return false;
		    });
		    $(this.element).on('click', this.options.removeTrigger, function (event) {
		      if (event) event.preventDefault();
		      that.remove($(this));
		      return false;
		    });
		  };
		  // Plugin Definition
		  // =================
		  function Plugin(option) {
		    return this.each(function () {
		      var $this = $(this);
		      var data  = $this.data(DataKey);
		      if (!data) {
		        var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option);
		        $this.data(DataKey, (data = new BoxWidget($this, options)));
		      }
		      if (typeof option == 'string') {
		        if (typeof data[option] == 'undefined') {
		          throw new Error('No method named ' + option);
		        }
		        data[option]();
		      }
		    });
		  }
		  var old = $.fn.boxWidget;
		  $.fn.boxWidget             = Plugin;
		  $.fn.boxWidget.Constructor = BoxWidget;
		  // No Conflict Mode
		  // ================
		  $.fn.boxWidget.noConflict = function () {
		    $.fn.boxWidget = old;
		    return this;
		  };
		  // BoxWidget Data API
		  //开始adminLte的动画监听事件
	    $(Selector.data).each(function () {
	      Plugin.call($(this));
	    });
		
	}


</script>
